<template>
  <view class="article-details-box">
    <view class="headerBox" id="articleTitle">
      <view class="returnBtn" @click="back">
        <image src="/static/images/pageReturnIcon.png"></image>
      </view>
      <view class="title">{{info.title}} </view>
    </view>
    <view class="mainBox" :style="'padding-top:'+distance+'px'">
      <view class="rollBox">
        <view class="content">
          <rich-text :nodes="
			    info.content &&
			      info.content.replace(
			        /src=\&quot;/g,
			        'style=max-width:100%;display:block; ' +
			          ' ' +
			          'src=&quot;' +
			          imgurl
			      )
			  " bindtap="tap" id="rich-text" class="rich-text"></rich-text>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
export default {
  components: {
  },
  data () {
    return {
      info: {
        title: '',
        content: ''
      },
      distance: 0,
    };
  },
  async onShow () {
  },
  async onLoad (options) {
    if (options.id) await this.getinfo(options.id)
    const query = uni.createSelectorQuery().in(this);
    query.select('#articleTitle').boundingClientRect(data => {
      this.distance = data.height
    }).exec();
  },
  methods: {
    async getinfo (id) {
      let res = await this.func.$post({ id: id }, '/Api/COMAPP/CPage/getInfo', true);
      this.info = res;
    },
    back () {
      uni.navigateBack({ delta: 1 })
    },
    goWallet () {
      this.func.goto('/pages/account/wallet/index')
    }
  },

  onPullDownRefresh () {
  },
  onReachBottom () {
  },
  onPageScroll (e) {
  }
};
</script>

<style lang="scss" scoped>
	.rich-text{
		word-break: break-word
	}
.article-details-box {
  width: 100%;
  height: 100%;
  // 头部
  .headerBox {
    min-height: 240rpx;
    background: #1a64e1;
    padding: 0 50rpx;
    color: #fff;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 9;
    &::before {
      content: "";
      display: block;
      height: 50rpx;
      background: #fff;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      border-radius: 50rpx 50rpx 0 0;
    }
    .returnBtn {
      width: 60rpx;
      height: 36rpx;
      padding: 30rpx 0 0;
      font-size: 0;
      image {
        width: 16rpx;
        height: 27rpx;
      }
    }
    .title {
      padding: 30rpx 0 90rpx;
      font-size: 30rpx;
      font-size: 40rpx;
      font-weight: 800;
      color: #fff;
    }
    .description {
      font-size: 40rpx;
      line-height: 50rpx;
    }
  }
  .mainBox {
    width: 100%;
    // height: calc(100vh - 690rpx);
    // position: relative;
    // top: -50rpx;
    // border-radius: 50rpx 50rpx 0 0;
    padding: 0 50rpx;
    background: #fff;
    box-sizing: border-box;
    .rollBox {
      width: 100%;
      padding-bottom: 50rpx;
      .content {
        font-size: 28rpx;
        color: #202020;
        line-height: 42rpx;
      }
    }
  }
}
</style>
<style>
page {
  width: 100%;
  height: 100%;
  font-family: PingFang;
  background-color: #fff;
}
</style>